<template>
    <div class="container">
        <div v-if="tishi" class="tishi">
            <div class="tishi_content">
                <div class="tishi_title">提示</div>
                <div class="tishi_content2">确定删除?</div>
                <div class="tishi_caozuo">
                    <div class="quxiao" @click="cancel">取消</div>
                    <div class="queding" @click="make_sure">确定</div>
                </div>
            </div>
        </div>
        <!--观看历史-->
        <div class="lishi">
            <!--切换按钮-->
            <div class="top">
                <div>
                    <router-link to="/bookrack"><div>我的书架</div></router-link>
                    <div class="yuelishi">阅读历史</div>
                </div>
                <div class="guanli" @click="qingkong">{{edit}}</div>
            </div>
            <!--历史显示-->
            <div class="book" :style="{marginBottom:botm+'px'}">
                <div class="intro" v-if="!!last_book.BookID">
                    <router-link :to="{path:'/read',query:{id:last_book.BookID,chapter_Index:last_book.ChapterIndex}}">
                        <div class="left">
                            <div class="intro_tu">
                                <img v-if="last_book.BookImage" :src="last_book.BookImage">
                            </div>
                            <div class="intro_right">
                                <p class="intro_title">{{last_book.BookTitle}}</p>
                                <p class="intro_zhangjie">{{last_book.ChapterTitle}}</p>
                                <p>上次浏览</p>
                            </div>
                        </div>
                    </router-link>
                </div>
                <div class="intro" v-for="book in books" :key="book.ID">
                    <router-link :to="{path:'/read',query:{id:book.BookID,chapter_Index:book.ChapterIndex}}">
                        <div class="left">
                            <div class="intro_tu">
                                <img v-lazy="book.BookImage">
                            </div>
                            <div class="intro_right">
                                <p class="intro_title">{{book.BookTitle}}</p>
                                <p class="intro_zhangjie">{{book.ChapterTitle}}</p>
                                <div class="intro_time">{{renderTime(book.ReadAt)}}</div>
                            </div>
                        </div>
                    </router-link>
                    <div class="shanchu">
                        <div v-if="anniu">
                            <span class="anniu">
                                <div class="dan" ref="book" :class="bag ? 'bag': ''" >
                                    <input type="checkbox" @click="dian" @change="not_all" :value="book.ID" v-model="check">
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="meiyou"  v-if="none">没有更多阅读历史了</div>
            <div class="delet" v-if="anniu">
                <div class="del">
                    <div class="quanxuan shanchu">
                        <div>
								<span class="anniu">
									<div class="quan" :class="bag ? 'bag': ''">
										<input type="checkbox" v-model="select_all" @click="quanxuan">
									</div>
								</span>
                        </div>
                    </div>
                    <div  @click="shan_search">删除</div>
                </div>
            </div>
            <!--查看更多-->
            <div v-if="see_more" class="see_more" @click="next_serach()">
                点击查看更多阅读历史
            </div>
        </div>
        <bottom :i="icon"></bottom>
    </div>
</template>

<script>
    import bottom from './bottom'
    export default {
        name: "lishi",
        components:{
            bottom,
        },
        data() {
            return{
                search:{
                    offset: 0,
                    limit: 10,
                },
                icon: 0,
                books: [], // 显示的历史图书列表
                last_book:{}, // 最近阅读
                check: [],
                select_all: false, //全选
                anniu: false, //选中按钮
                edit: '管理', //图书编辑按钮
                botm: 0,
                none: false, //没有更多内容了
                see_more: false, //加载更多
                tishi: false, //提示框
                confirm: false, //删除
                bag: false,
            }
        },
        created:function(){
            let self = this;
            this.get_last_history_book(function(){
                self.start_search();
            });
            this.set()
            document.title = '阅读历史';
        },
        methods: {
            get_last_history_book: function(call){
                this.$axios.get('/latest-history').then(response=>{
                    if(response.data.history) {
                        this.last_book = response.data.history;
                    }
                    call()
                })
            },
            set:function(){
                this.$emit('set',0)
            },
            qingkong:function(){
                this.anniu = !this.anniu
                this.check = []
                this.bag = false
                if(this.anniu){
                    this.edit ='完成'
                    this.botm = 100
                }else{
                    this.edit ='管理'
                    this.botm = 0
                }
            },
            dian:function(e){
                let bagk = e.currentTarget.parentElement.style.background
                e.currentTarget.parentElement.style.background = '#f66'
                if(bagk == 'rgb(255, 102, 102)'){
                    e.currentTarget.parentElement.style.background = '#fff'
                }else{
                    e.currentTarget.parentElement.style.background = '#f66'
                }
            },
            not_all:function(){
                if(this.books.length==this.check.length){
                    this.select_all=true
                    this.bag = true
                }else{
                    this.select_all=false
                    this.bag = false
                }
                console.log(this.check)
            },
            quanxuan:function(){
                let bagk = this.$refs.book
                if(this.select_all){
                    this.check=[]
                    this.bag = false
                    for (let i=0,ln=bagk.length;i<ln;i++){
                        bagk[i].style.background = '#fff'
                    }
                }else{
                    var book=[];
                    for(let i=0,ln=this.books.length;i<ln;i++){
                        book.push(this.books[i].ID)
                    }
                    this.check=book;
                    this.bag = true
                    for (let i=0,ln=bagk.length;i<ln;i++){
                        bagk[i].style.background = '#f66'
                    }
                }
            },
            //格式化时间
            renderTime(date) {
                let dateee = new Date(date).toJSON();
                return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
            },
            // 开始搜索
            start_search: function() {
                this.$axios.get('/histories',{params:{Limit:this.search.limit,Offset:this.search.offset}}).then(response=>{
                    if(response){
                        if(response.data.histories.length != 0){
                            this.books=response.data.histories
                            console.log( this.books)
                        }else{
                            this.none = true
                        }
                    }else{
                        this.see_more = false
                        this.none = true
                        this.books = []
                    }
                })
            },
            shan_search: function() {
                this.tishi = true
            },
            make_sure:function(){
                let str=JSON.stringify(this.check)
                let strs=str.substring(1,str.length-1)
                this.confirm = true
                this.tishi = false
                if(this.confirm){
                    this.$axios.delete('/histories',{params:{IDs:[strs]}}).then(response=>{
                        if(response){
                            this.check=[]
                            this.start_search()
                        }
                    })
                }
            },
            cancel:function(){
                this.tishi = false
            },
            next_serach: function() {
                this.search.offset += this.search.limit;
                this.start_search(true);
            }
        }
    }
</script>

<style scoped>
    body {
        background: #f9fafa;
        margin: 0px;
    }
    .tishi{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        display: flex;
        background: rgba(0,0,0,0.5);
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }
    .tishi_content{
        width: 67%;
        height: 20vh;
        background: white;
        border-radius: 7px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .tishi_title{
        margin: 16px 0px -5px;
        color: #333;
        font-size: 1.2rem;
    }
    .tishi_content2{
        color: #888;
        font-size: 1rem;
    }
    .tishi_caozuo{
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        border-top: 1px solid #ddd;
    }
    .tishi_caozuo div{
        width: 50%;
        padding: 12px 0px;
        font-size: 1.1rem;
    }
    .quxiao{
        border-right: 1px solid #ddd;
    }
    .queding{
        color: #3688ff;
    }
    .container {
        background: white;
        margin-bottom: 70px;
        padding: 0px;
    }
    .top{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #DDDDDD;
        font-size: 1.1rem;
        background: white;
        padding: 15px 0px;
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 100;
    }
    .top div{
        display: flex;
        padding-left: 10px;
    }
    .yuelishi,.top .lishi{
        margin-left: 15px;
    }
    .top a{
        text-decoration: none;
        color: black;
    }
    .shujia,.yuelishi{
        color: #3688ff;
    }
    .guanli{
        color: gray;
        padding-right: 15px;
    }
    .book{
        margin-top: 75px;
    }
    .ceng{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #DDDDDD;

    }
    .intro {
        margin-top: 20px;
        display: flex;
        text-decoration: none;
        color: black;
        padding-bottom: 10px;
        justify-content: space-between;
    }
    .intro a{
        text-decoration: none;
        color: black;
    }
    .intro img {
        width: 5.5rem;
        height: 7rem;
        margin-left: 20px;
        -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.2);
        box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }
    .left{
        display: flex;
        justify-content: space-around;
    }
    .intro_right {
        margin: 0px 25px;
    }
    .intro_right p{
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .intro_title {
        font-size: 1.2rem;
        margin: -1px 0px 0px;
    }

    .intro_zhangjie {
        font-size: 1rem;
        color: #989898;
    }

    .intro_time{
        margin-top: 20px;
        font-size: 1rem;
        color: #989898;
    }
    .meiyou {
        text-align: center;
        padding: 10px;
        color: #999;
    }
    .shanchu{
        width: 2rem;
        height: 2rem;
        margin-right: 13px;
        font-size: .24rem;
        padding-left: .1rem;
        text-align: center;
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
        color: #3688ff;
    }
    .shanchu span{
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        border-radius:50%;
        border: 1px solid #f66;
        padding: 2px;
    }
    .shanchu span div{
        width: 1.5rem;
        height: 1.5rem;
        border-radius:50% ;
    }
    .shanchu input{
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .bag_2{
        background: gainsboro;
    }
    .bag{
        background: #f66;
    }

    .del{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 0px 10px;
        position: fixed;
        width: 100%;
        bottom: 50px;
        border-top: 1px solid #ccc;
        background: white;
        border-bottom: 1px solid #ccc;
    }
    .del>div:nth-child(2){
        margin-right: 15px;
    }
    .del .shanchu{
        margin-left: 15px;
    }
    .del .shanchu span,.del .shanchu span div{
        width: 1.4rem;
        height: 1.4rem;
    }
    .delet{
        /*display: none;*/
        color:gray;
    }
    .del>.shanchu{
        position: static;
    }
    .see_more{
        padding: 10px 0px;
        margin: 15px;
        background: #3688ff;
        border-radius:5px;
        text-align: center;
        color: white;
        font-size: 16px;
    }
    .footer {
        position: fixed;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        font-size: 1rem;
        text-align: center;
        bottom: 0px;
        background: white;
        padding-top: 5px;
        border-top:1px solid #DDDDDD ;
    }
    .iconfont{
        font-size: 22px!important;
    }
    .footer a {
        text-decoration: none;
        color: gray;
    }
    .shujia p{
        color: #3688FF;
    }
    @media (min-width: 300px) {
        .container {
            width: 100%;
        }
    }

    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
        .tuijian img{
            width: 9rem;
        }
        .img{
            width: 3.5rem !important;
        }
        .books img{
            width: 9rem;
        }
    }

</style>
